<template>
  <view class="warp">
    <up-cell-group>
      <up-cell icon="clock-fill" title="日期选择">
        <template #value>
          <up-datetime-picker
              hasInput
              v-model="conditionForm.day"
              mode="datetime"
          ></up-datetime-picker>
        </template>
      </up-cell>
      <up-cell icon="question" title="六爻">
        <template #value>
          <up-radio-group
              v-model="conditionForm.sixYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`liuYao-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>
      </up-cell>
      <up-cell icon="question" title="五爻">
        <template #value>
          <up-radio-group
              v-model="conditionForm.fiveYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`five-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>
      </up-cell>
      <up-cell icon="question" title="四爻">
        <template #value>
          <up-radio-group
              v-model="conditionForm.fourYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`four-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>
      </up-cell>
      <up-cell icon="question" title="三爻">
        <template #value>

          <up-radio-group
              v-model="conditionForm.threeYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`three-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>

      </up-cell>
      <up-cell icon="question" title="二爻">
        <template #value>

          <up-radio-group
              v-model="conditionForm.secondYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`second-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>

      </up-cell>
      <up-cell icon="question" title="初爻">
        <template #value>

          <up-radio-group
              v-model="conditionForm.firstYao"
              placement="column"
          >
            <view style="display: flex;align-items: center;" v-for="(item, index) in yaoChoose"
                  :key="`firstYao-${index}`">
              <view
                  :class="['yao-item',item==='少阳'?'yang-yao':'',item==='少阴'?'yin-yao':'',item==='老阴'?'old-yin':'',item==='老阳'?'old-yang':'']"></view>
              <up-radio
                  :customStyle="{marginBottom: '8px'}"

                  :label="item"
                  :name="item"
              >
              </up-radio>
            </view>
          </up-radio-group>
        </template>
      </up-cell>
    </up-cell-group>
    <up-row justify="space-between" customStyle="margin-top: 10px">
      <up-col span="5">
        <up-button style="margin:12px 0" text="重置" @click="reset"></up-button>

      </up-col>
      <up-col span="5">
        <up-button text="开始排卦" type="primary" @click="submit"></up-button>

      </up-col>
    </up-row>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDate: false,
      conditionForm: {
        day: Date.now(),
        sixYao: "",
        fiveYao: '',
        fourYao: '',
        threeYao: '',
        secondYao: '',
        firstYao: ''
      },
      yaoChoose: ['少阴', '老阴', '少阳', '老阳']
    }
  },
  onLoad() {
  },
  methods: {
    reset() {
      this.conditionForm = {
        day: Date.now(),
        sixYao: "",
        fiveYao: '',
        fourYao: '',
        threeYao: '',
        secondYao: '',
        firstYao: ''
      }
    },
    toast(title) {
      uni.showToast({
        title,
        icon: 'none'
      })
    },
    submit() {
      if (!this.conditionForm.sixYao) {
        return this.toast('请选择六爻')
      }
      if (!this.conditionForm.fiveYao) {
        return this.toast('请选择五爻')
      }
      if (!this.conditionForm.fourYao) {
        return this.toast('请选择四爻')
      }
      if (!this.conditionForm.threeYao) {
        return this.toast('请选择三爻')
      }
      if (!this.conditionForm.secondYao) {
        return this.toast('请选择二爻')
      }
      if (!this.conditionForm.firstYao) {
        return this.toast('请选择初爻')
      }
      uni.setStorageSync('conditionForm', this.conditionForm)
      uni.navigateTo({
        url: '/pages/index/result'
      })
    }
  },
}
</script>

<style lang="scss">
.warp {
  padding: 12px;
}

.yao-item {
  width: 30px;
  height: 4px;
  background: #333333;
  margin-right: 10px;
  position: relative;

  &.yin-yao, &.old-yin {
    &::after {
      content: "";
      position: absolute;
      display: block;
      width: 4px;
      height: 4px;
      background: #ffffff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &.old-yin::before {
    content: "X";
    position: absolute;
    display: block;
    z-index: 1;
    left: -10px;
    top: 50%;
    transform: translate(-100%, -50%);
  }

  &.old-yang::before {
    content: "O";
    position: absolute;
    display: block;
    z-index: 1;
    left: -10px;
    top: 50%;
    transform: translate(-100%, -50%);
  }

}

</style>
